﻿@using Cinema_Ticketing_System.Models;
@{
    ViewBag.Title = "CinemaInformation";
    Layout = "~/Views/Shared/CinemaLayoutPage.cshtml";
}
@section styles{
    <style>
        #box img {
            width: 100%;
            height: 100%;
        }

        #box {
            margin-top: 5px;
            height: 150px;
        }

        #main {
            margin-top: 10px;
        }

            #main div {
                margin-top:10px;
            }

        #upa {
            background-color: orange;
            border-radius: 5px;
            text-align: center
        }

            #upa a {
                color: white
            }

        #score {
            font-size: 300%;
            color: orange;
            font-weight: bolder;
            text-align: center
        }

        #area {
            margin-top: 10px;
        }

        #area1 {
            background-color: orange;
        }

        #area2 {
            color: orange;
            border-bottom: 1px solid gainsboro;
        }
    </style>
}
<from class="form-horizontal">
    <div class="col-lg-12" id="main">
        <div class="col-sm-12">
            <input type="text" placeholder="拼音首字母搜索影院,例如HX=华夏" id="keywords"/><button id="btn">搜索</button>
        </div>
        <div class="col-sm-12" id="area">
            <div class="col-lg-2">地区搜索：</div>
            <div class="col-lg-1" id="area1">全部</div>
            @foreach (var item in ViewBag.listarea as List<area_table>)
            {
                <div class="col-lg-1" id="area2">
                    <div>@item.areaname</div>
                    <div style="display:none">@item.areaid</div>
                </div>
            }

        </div>
    </div>
    <div class="col-lg-12">
        <div class="col-lg-12" id="div1" style="display:block">
            @foreach (var item in ViewBag.listname)
            {
                <div id="box" class="col-lg-12">
                    <div class="col-lg-2" style="width:168px;height:126px">
                        <img src="/imgs/@item.cinemaurl" />
                    </div>
                    <div class="col-lg-8">
                        <div>@item.cinemaid</div>
                        <div>@item.cinemaname</div>
                        <div>@item.contact_information</div>
                        <div>@item.cinemaaddress</div>
                        <div><a>几部影片正在上映>></a></div>
                    </div>
                    <div class="col-lg-2">
                        <div id="score">@item.cinemascore</div>
                        <div id="upa">
                            <a href="~/HomePage/Buying_Tickets">
                                选座购票
                            </a>
                            <div style="display:none">@item.cinemaid</div>
                        </div>
                    </div>
                </div>

            }
        </div>

    </div>
    <div class="col-lg-12">
        <div></div>
        <div id="one"><a href="#" id="first">第一页</a><a href="#" id="up">上一页</a><a href="#" id="down">下一页</a><a href="#" id="last">尾页</a></div>
    </div>
    <div class="col-lg-12" style="display:none">
        <ul id="ul1">
            @for (var i = 0; i <= ViewBag.pageNum; i++)
            {
                <li class="active">@i</li>
            }
        </ul>
        <div id="fid">@(Session["fid"])</div>
    </div>
</from>
@section scripts
{
    <script src="~/Scripts/jquery-3.4.1.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
    <script>
        $(function () {
            var fid = $("#fid").text();
            var area2 = -99;
            var keywords = null;
            var x = $("#ul1 li:last-child").text();
            var pageIndex = 1;
            var cid = -99;
            $("#upa a").click(function (e) {
                cid = $(e.target).next().text()
            })

            $("#area #area2").click(function (e) {
                pageIndex = 1
                area2 = $(e.target).next().text();
                $.ajax({
                    url: '/HomePage/CinemaInformation',
                    type: 'GET',
                    data: { "requestStatus": 1, "pageIndex": pageIndex, "keywords": keywords, "area": area2, "fid": fid },
                    success: function (data) {
                        createRow(data);
                    },
                    error: function () {
                        alert('Request Error');
                    }
                })
            })

            $("#area1").click(function (e) {
                area2 = -99;
                pageIndex = 1
                area2 = $(e.target).next().text()
                $.ajax({
                    url: '/HomePage/CinemaInformation',
                    type: 'GET',
                    data: { "requestStatus": 1, "pageIndex": pageIndex, "keywords": keywords, "area": area2, "fid": fid },
                    success: function (data) {
                        createRow(data);
                    },
                    error: function () {
                        alert('Request Error');
                    }
                })
            })

            $('#one a:first-child').click(function () {

                pageIndex = 1
                $.ajax({
                    url: '/HomePage/CinemaInformation',
                    type: 'GET',
                    data: { "requestStatus": 1, "pageIndex": pageIndex, "keywords": keywords, "area": area2, "fid":fid},
                    success: function (data) {
                        createRow(data);
                    },
                    error: function () {
                        alert('Request Error');
                    }
                })

            })

            $("#one a:nth-child(2)").click(function () {
                if (pageIndex > 1) {
                    pageIndex = pageIndex - 1
                    $.ajax({
                        url: '/HomePage/CinemaInformation',
                        type: 'GET',
                        data: { "requestStatus": 1, "pageIndex": pageIndex, "keywords": keywords, "area": area2, "fid": fid},
                        success: function (data) {
                            createRow(data);
                        },
                        error: function () {
                            alert('Request Error');
                        }
                    })
                }

            })

            $("#one a:nth-child(3)").click(function () {
                if (pageIndex < x) {
                    pageIndex = pageIndex + 1
                    $.ajax({
                        url: '/HomePage/CinemaInformation',
                        type: 'GET',
                        data: { "requestStatus": 1, "pageIndex": pageIndex, "keywords": keywords, "area": area2, "fid": fid},
                        success: function (data) {
                            createRow(data);
                        },
                        error: function () {
                            alert('Request Error');
                        }
                    })
                }

            })


            $("#one a:last-child").click(function () {
                pageIndex = x
                $.ajax({
                    url: '/HomePage/CinemaInformation',
                    type: 'GET',
                    data: { "requestStatus": 1, "pageIndex": pageIndex, "keywords": keywords, "area": area2, "fid": fid},
                    success: function (data) {
                        createRow(data);
                    },
                    error: function () {
                        alert('Request Error');
                    }
                })
            })


            function createRow(data) {
                $('#div1 div').remove();
                $.each(data, function (i, item) {
                    var $div = $(`
                                <div id="box" class="col-lg-12">
                                    <div class="col-lg-2" style="width:168px;height:126px">
                                        <img src="/imgs/${item.cinemaurl}" />
                                    </div>
                                    <div class="col-lg-8">
                                        
                                        <div>${item.cinemaname}</div>
                                        <div>${item.contact_information}</div>
                                        <div>${item.cinemaaddress}</div>
                                        <div><a>几部影片正在上映>></a></div>
                                    </div>
                                    <div class="col-lg-2">
                                        <div id="score">${item.cinemascore}</div>
                                        <div id="upa">
                                            <a href="HomePage/Buying_Tickets">
                                                选座购票
                                            </a>
                                            <div style="display:none">${item.cinemaid}</div>
                                        </div>
                                    </div>
                                </div>
                                `);
                    $('#div1').append($div);
                })
            }

            $("#btn").click(function (e) {
                keywords = $("#keywords").text();
                pageIndex = 1
                $.ajax({
                    url: '/HomePage/CinemaInformation',
                    type: 'GET',
                    data: { "requestStatus": 1, "pageIndex": pageIndex, "keywords": keywords, "area": area2, "fid": fid },
                    success: function (data) {
                        createRow(data);
                    },
                    error: function () {
                        alert('Request Error');
                    }
                })
            })
        })
    </script>

}